// 延迟常量
const delay = 500;

/**
 * 发信息到content-script
 * @param {*}} message
 * @param {*} callback
 */
function sendMsgToContentScript(message, callback) {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
      if (callback) callback(response);
    });
  });
}

/**
 * popup调用sendMsgToContentScript方法发送信息到content-script
 */
sendMsgToContentScript({ type: "popMsg", value: "你好， 我是popup" }, function (
  response
) {
  // content-script 的回复

  // image 容器
  let content_1688_dom = document.getElementById(
    "download_1688_images_content"
  );

  // download button dom
  let download_btn_dom = document.getElementById(
    "download_1688_images_download_btn"
  );

  if ("undefined" === typeof response) {
    let div = document.createElement("div");
    div.style.width = "100%";
    div.innerHTML = `
        <div style='margin: 5px;'>
          <div style='font-size: 20px;'>没有获取到图片</div>
          <div style='margin: 10px 10px; font-size: 14px;'>请在地址栏以<span style='color: red;'>https://detail.1688.com/pic/</span>开头的路径下使用本插件</div>
          <div style='font-size: 14px; margin-bottom: 10px;'>如下方页面:</div>
          <a href='https://detail.1688.com/pic/612734832854.html?spm=a261y.7663282.autotrace-offerDetailContext1.4.43e68390FxsQU0' target="_black">https://detail.1688.com/pic/612734832854.html?spm=a261y.7663282.autotrace-offerDetailContext1.4.43e68390FxsQU0</a>
          <div style='margin-top: 30px;'>注: 在以<span style='color: red;'>https://detail.1688.com/pic/</span>开头的页面无法获取图片时请刷新页面再使用本插件.</div>
        </div>
      `;

    content_1688_dom.style.display = "flex";

    content_1688_dom.appendChild(div);
    download_btn_dom.innerText = "Download All [0张]";
  } else {
    let size = response.length;
    let htmlStr = ``;
    for (let i = 0; i < size; i++) {
      htmlStr += `
        <div style="border: 1px solid #ff7302; margin: 2px; height: 174px; width: 144px;">
          <div style="width: 144px; height: 144px;">
            <img src="${response[i]}" class="download_image" />
          </div>
          <div data-img="${response[i]}" style="height: 30px; background-color: #ff7302; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;">Download</div>
        </div>
      `;

      // let img = document.createElement("img");
      // img.src = response[i];
      // img.width = 144;
      // img.height = 144;
      // img.className = "download_image";
      // content_1688_dom.appendChild(img);
    }

    content_1688_dom.innerHTML = htmlStr;

    download_btn_dom.innerText = `Download All [${size}张]`;
  }
});

/**************************** Start Download Operator ****************************/

let download_btn_dom = document.getElementById(
  "download_1688_images_download_btn"
);

download_btn_dom.addEventListener("click", function () {
  let node = document.getElementsByClassName("download_image");
  for (let i = 0; i < node.length; i++) {
    // 间隔下载,防止被封
    setTimeout(function () {
      doDownload(node[i].src);
    }, i * delay);
  }
});

function doDownload(image_url) {
  let x = new XMLHttpRequest();
  x.open("GET", image_url, true);
  x.responseType = "blob";
  x.onload = function (e) {
    let url = window.URL.createObjectURL(x.response);
    let a = document.createElement("a");
    a.href = url;
    a.download = "";
    a.click();
  };
  x.send();
}

// download single image
let content_1688_dom = document.getElementById("download_1688_images_content");

content_1688_dom.addEventListener("click", function (e) {
  if ("undefined" !== typeof e.target.dataset.img) {
    doDownload(e.target.dataset.img);
  }
});

/**************************** End Download Operator ****************************/
